<template>
  <div>

    <header>
      <span class="iconfont icon-fanhui" @click="back">
      </span><span>火爆餐厅</span>
    </header>
    <div class="content">
      <div class="select">
        <div v-for="(item,index) in list" :key='index' @click="changeShow(index)" :class="index===red?'active':''">
          {{item}}
        </div>

      </div>
      <div class="list">
        <dl class="shop" v-for="item in list2" :key='item'>
          <dt><img :src="item.logo" alt=""></dt>
          <dd>
            <h3>{{`${item.shopName}`}}</h3>
            <p><i :class="item.avgReview>=index?'iconfont icon-start active':'iconfont icon-start'"
                v-for='(it,index) in star' :key='index'></i><span>{{`￥${item.avgPrice}/人`}}</span>
            </p>
            <p><span>{{item.styleCooking}}</span><span>{{`${(item.distance/1000).toFixed(2)}km`}}</span></p>
            <p v-show='item.youpuFullName'>
              <span>{{item.youpuFullName}}</span>
            </p>
          </dd>
        </dl>
      </div>
      <div class="loading">加载中...</div>
      <div class="mask" v-show="isShow">
        <div v-show="dindex===0" class="tab">
          <div class="left">
            <div :class="index===lindex?'listnode active':'listnode' " v-for='(item,index) in DistrictList'
              :key='item.id' @click="changeColor(item,index)">
              {{item.name}}
            </div>
          </div>
          <div class="right">
            <div v-for='ite in list1' :key='ite' class="listnode" @click="getList(ite)">{{ite.name}}</div>
          </div>
        </div>
        <div v-show="dindex===1" class="tab">

          <div class="listnode" v-for='(item,index) in cooking' :key='item.id' @click="changeColor(item,index)">
            {{item.name}}
          </div>
        </div>
        <div v-show="dindex===2" class="tab">
          <div class="listnode" v-for='(item,index) in order' :key='item.id' @click="changeColor(item,index)">
            {{item.name}}
          </div>
        </div>
        <div v-show="dindex===3" class="tab">4</div>
      </div>
    </div>

  </div>

</template>

<script>
import '../../fonts/iconfont.css'
import { getDistrictList, getfiltercontent, getListDate } from '../../service/modules/fire'

export default {
  data () {
    return {
      DistrictList: [],
      isShow: false,
      list: ['附近', '全部菜系', '智能排序', '筛选'],
      dindex: 0,
      lindex: 0,
      list1: [],
      list2: [],
      star: [1, 2, 3, 4, 5],
      red: 0,
      page: 1,
      cooking: [],
      order: []
    }
  },
  methods: {
    back () { uni.navigateBack() },
    changeShow (index) {
      this.isShow = true
      this.dindex = index
    },
    changeColor (item, index) {
      this.lindex = index
      this.list1 = item.bc
    },
    async getList (ite) {
      let res = await getListDate({
        "page": 1,
        "pageSize": 20,
        "cityId": 19,
        "longitude": 116.29290008544922,
        "latitude": 40.03954315185547,
        "type": "all",
        "bcidName": ite.name,
        "bcid": ite.id,
        "mwAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
        "fromw": 1401
      })
      this.isShow = false
      if (res) {

        this.list2 = res.data.shops
      }

    }

  },
  async onReachBottom () {
    this.page += 1
    let res = await getListDate({
      "page": this.page,
      "pageSize": 20,
      "cityId": 19,
      "longitude": 116.29290008544922,
      "latitude": 40.03954315185547,
      "type": "all",
      "mwAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      "fromw": 1401
    })
    if (res) {
      this.list2 = this.list2.concat(res.data.shops)
    }
  },
  async onShow () {
    let res = await getfiltercontent({
      "cityId": 19,
      "mwAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      "mAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      "fromw": 1401
    })
    if (res) {
      console.log(res.data, '---------------------')
      this.DistrictList = res.data.areas
      this.cooking = res.data.style
      this.order = res.data.orders
    }
    let res1 = await getListDate({
      "page": 1,
      "pageSize": 20,
      "cityId": 19,
      "longitude": 116.29290008544922,
      "latitude": 40.03954315185547,
      "type": "all",
      "mwAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
      "fromw": 1401
    })
    if (res1) {
      this.list2 = res1.data.shops

    }
  },

}
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  width: 100%;
  padding-top: 56rpx;
  display: flex;
  align-items: center;
  height: 80rpx;
  padding-left: 20rpx;
  margin-bottom: 40rpx;
  span {
    margin-right: 20rpx;
  }
}
.content {
  width: 100%;
  position: relative;
  .select {
    display: flex;
    justify-content: space-around;
    font-size: 30rpx;
    .active {
      color: red;
    }
  }
  .loading {
    text-align: center;
    height: 60rpx;
  }
  .list {
    width: 100%;
    background: #eee;
    .shop {
      width: 100%;
      background: #fff;
      margin: 10rpx 0;
      padding: 20rpx 0;
      display: flex;
      dt {
        width: 30%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 80%;
          height: 80%;
        }
      }
    }
    dd {
      width: 70%;
      h3 {
        font-weight: bold;
      }
      p {
        font-size: 24rpx;
        color: #ccc;
        margin: 20rpx 0;
        .active {
          color: orange;
        }
        i {
          display: inline;
        }
        span {
          margin-right: 50rpx;
        }
      }
    }
  }
  .mask {
    width: 100%;
    height: 2000rpx;

    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50rpx;
    left: 0;
    font-size: 32rpx;
    .tab {
      width: 100%;
      height: 600rpx;
      background: #eee;
      overflow: scroll;
      .left {
        width: 50%;
        height: 100%;
        background: #fff;
        overflow: scroll;
        float: left;
        .active {
          background: #eee;
          color: red;
        }
      }
      .listnode {
        padding: 20rpx 20rpx;
      }
      .right {
        width: 50%;
        height: 100%;
        float: right;
        overflow: scroll;
        .listnode {
          padding: 20rpx 20rpx;
        }
      }
    }
  }
}
</style>